<template>
  <!-- 信息 -->
  <div class="house-detail-info">
    <!-- 标题 -->
    <h3 class="house-detail-info-title">{{ housingDetails.title }}</h3>
    <!-- 优点 -->
    <div class="house-detail-info-tags">
      <span
        v-for="(item, index) in housingDetails.tags"
        :key="index"
        class="house-detail-info-tag"
      >
        {{ item }}
      </span>
    </div>
    <!-- 价格方面 -->
    <div class="house-detail-info-price">
      <div class="info-price-item">
        <div>
          {{ housingDetails.price }}<span class="info-price-month">/月</span>
        </div>
        <div>租金</div>
      </div>
      <div class="info-price-item">
        <div>{{ housingDetails.roomType }}</div>
        <div>房型</div>
      </div>
      <div class="info-price-item">
        <div>{{ housingDetails.size }}平米</div>
        <div>面积</div>
      </div>
    </div>
    <!-- 详情 -->
    <div class="house-detail-info-basic">
      <div class="info-basic-item">
        <span class="info-basic-title">装修：</span>精装
      </div>
      <div class="info-basic-item">
        <span class="info-basic-title">朝向：</span>
        <span v-for="(item, index) in housingDetails.oriented" :key="index"
          >{{ item }}
        </span>
      </div>
      <div class="info-basic-item">
        <span class="info-basic-title">楼层：</span>{{ housingDetails.floor }}
      </div>
      <div class="info-basic-item">
        <span class="info-basic-title">类型：</span>普通住宅
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HouseDetailInfo',
  props: {
    housingDetails: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped lang="less">
.house-detail-info {
  padding: 15px;
  background: #fff;
  // 标题
  .house-detail-info-title {
    font-weight: 400;
    font-size: 16px;
    color: #333;
  }
  // 优点
  .house-detail-info-tags {
    text-align: left;
    overflow: hidden;
    display: flex;
    .house-detail-info-tag {
      display: inline-block;
      font-size: 12px;
      border-radius: 3px;
      padding: 4px 5px;
      margin-right: 5px;
      line-height: 12px;
      color: #39becd;
      background: #e1f5f8;
    }
  }
  // 价格方面
  .house-detail-info-price {
    display: flex;
    border-top: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    margin: 15px 0;
    padding: 15px 0;
    .info-price-item {
      flex: 1;
      text-align: center;
      color: #999;
      font-size: 14px;
      :first-child {
        height: 26px;
        line-height: 26px;
        color: #fa5741;
        font-size: 18px;
        font-weight: bolder;
        font-family: 'Microsoft YaHei';
      }
      .info-price-month {
        font-size: 12px;
        font-weight: 400;
      }
    }
  }
  // 详情
  .house-detail-info-basic {
    display: flex;
    flex-flow: wrap;
    .info-basic-item {
      height: 26px;
      width: 50%;
      font-size: 13px;
      .info-basic-title {
        color: #999;
        padding-right: 5px;
        line-height: 26px;
      }
    }
  }
}
</style>
